require(["config"], function() {
	require(["jquery", "template", "header", "cookie"], function($, template) {

		function Cart() {
			this.products = null; // 保存购物车的商品数组结构
			this.load();
			//			this.addListener();
		}

		Cart.prototype = {
			constructor: Cart,
			// 加载，渲染页面，如果有选购的购物车商品，
			// 则显示商品信息，如果没有，则显示空的提示
			load: function() {
				// 配置 cookie 插件自动转换 JS 与 JSON
				$.cookie.json = true;
				// 读取cookie中保存的购物车
				var products = this.products = $.cookie("cart") || [];
				//判断购物车是否为空
				if(products.length === 0) { //购物车为空
					//					$(".cart_empty").show().siblings(".container,.container").hide();
					var html = `<div class="cart_empty">
									<i class="iconfont icon-iconset0318"></i>
									<p>
										<b>您的购物车里还没有商品</b>，您可以：<br /> 将
										<a href="">收藏夹</a>中的商品添加进来，或者去看看
										<a href="">商城 »</a>
									</p>
								</div>`;
					$(".cart_body").html(html);
					return;
				}
				//购物车不为空
				this.loadCart_container();
			},
			loadCart_container() {
				// 渲染模板,渲染表格数据
				var data = {
					products: this.products
				}
				//				console.log(data)
				var html = template("cart_tr", data);
				$(".cart-item").html(html);
				this.addListener();
				this.calcTotal();

			},
			//事件监听
			addListener() {
				$(".container").on("click", ".decrement,.increment", $.proxy(this.decIncHandler, this));
				$(".container").on("click", ".btn-delete", $.proxy(this.delhandler, this));
				$(".container").on("blur", ".num", $.proxy(this.inputHandler, this));
				$(".container").on("click", ".action-clean", this.clearCartHandler);
			},
			//数量加减
			decIncHandler(event) {
				var src = event.target,
					id = $(src).parents("tr").find(".id").val();

				var product = this.products.filter(prod => prod.id === id)[0];

				console.log(product)
				//点击+/-改变数量
				// +/-数量
				if($(src).is(".decrement")) { // -
					if(product.amount <= 1)
						return;
					product.amount--;
				} else { // +
					product.amount++;
				}
				console.log(product.amount)
				$(src).parent().find(".num").val(product.amount);

				_price = Number($(src).parent().parent().siblings(".p-price").text().slice(1));

				$(src).parent().parent().siblings(".p-subtotal").text("￥" + (product.amount * product.price).toFixed(2));
				//保存到 cookie
				$.cookie("cart", this.products, {
					expires: 10,
					path: "/"
				});
				this.calcTotal();
			},
			inputHandler(event) {
				// 事件源
				var src = event.target;
				// 所在行
				var tr = $(src).parents("tr");
				console.log(tr)
				// 商品 id
				var id = tr.find(".id").val();

				var product = this.products.filter(prod => prod.id == id)[0];
				//修改数量
				var _amount = $(src).val();
				var reg = /^[1-9]\d*$/;
				if(!reg.test(_amount)) {
					$(src).val() = _amount;
					return;
				}
				product.amount = _amount;

				// 保存回 cookie 中
				$.cookie("cart", this.products, {
					expires: 10,
					path: "/"
				});
				// 显示小计
				var d = tr.find(".p-subtotal").text("￥" + product.amount * product.price);
				// 计算合计
				this.calcTotal();
			},
			delhandler(event) {
				var src = event.target;
				var _tr = $(src).parents("tr");
				//找到对应id
				var id = _tr.find(".id").val();
				this.products = this.products.filter((prod) => {
					return !(prod.id == id)
				});

				//存入cookie
				$.cookie("cart", this.products, {
					expires: 12,
					path: "/"
				});
				//从DOM树中删除tr
				$(_tr).remove();

				this.calcTotal();
				// 判断是否有购物车商品
				if(this.products.length === 0) { // 购物车为空
					var html = `<div class="cart_empty">
									<i class="iconfont icon-iconset0318"></i>
									<p>
										<b>您的购物车里还没有商品</b>，您可以：<br /> 将
										<a href="">收藏夹</a>中的商品添加进来，或者去看看
										<a href="">商城 »</a>
									</p>
								</div>`;
					$(".cart_body").html(html);
					return;
				}
			},
			//合计计算
			calcTotal() {
				var sum = 0;
				$(".cart-product").find(".p-subtotal").each(function(index, element) {
					sum += Number($(this).parents("tr").find(".p-subtotal").text().slice(1));
				});
				$("#total_price").text("￥" + sum.toFixed(2));
			},

			//清空购物车
			clearCartHandler() {
				var html = `<div class="cart_empty">
									<i class="iconfont icon-iconset0318"></i>
									<p>
										<b>您的购物车里还没有商品</b>，您可以：<br /> 将
										<a href="">收藏夹</a>中的商品添加进来，或者去看看
										<a href="">商城 »</a>
									</p>
								</div>`;
				$(".cart_body").html(html);
				//cookie中删除"cart"
				$.removeCookie("cart", {
					path: "/"
				});
			}
		}
		new Cart();
	});
});